<template>
  <div class="dailyExpensesContainer">
    <div class="daily-con">
      <SplitVertical title="日常支出"></SplitVertical>
      <v-form :formProps="searchForm" ref="form"
              v-on:handleReset="handleReset"
              v-on:coverFormData="coverFormData">
      </v-form>
    </div>
      <!-- 弹框 -->
      <add-daily v-if="show" @closeDialog="closeDialog"></add-daily>
      <edit-daily v-if="showTip" @closeDialog="closeDialog" :modifyData="modifyData"></edit-daily>
    <div class="stand">
      <div style="line-height: 45px;margin-left:10px;">
        <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
      </div>
      <div style="margin:0 10px;">
        <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
      </div>
    </div>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageCount">
          </el-pagination>
        </div>
      </div>
  </div>
</template>
<script>
  import VTable from 'components/common/PageTable/VTable'
  import addDaily from "components/base/DailyExpense/AddDaily.vue"
  import editDaily from "components/base/DailyExpense/EditDaily.vue"
  import SplitVertical from "components/common/SplitVertical"
  import VButton from "components/common/VButton"
  import VForm from "components/common/VForm"

  const payTypeObject = {
    '1': '收入',
    '2': '支出',
  }
  export default {
    components: {
      addDaily, editDaily, VTable, SplitVertical, VForm,VButton
    },
    data() {
      return {
        operationBtnArray: [{
          text: '刷新',
          icon:'el-icon-refresh',
          show: true,
          type: 'primary',
          methodName: 'refresh',
        }, {
          text: '新增',
          show: true,
          icon:'el-icon-plus',
          type: 'success',
          methodName: 'add',
        }],
        searchForm: {
          col: 3,
          labelWidth: '100px',
          submitBtn: {
            text: '搜索'
          },
          formItemArray: [{
            label: '开始时间',
            prop: 'startDate',
            placeholder: "请选择计划开始时间",
            itemType: 'date',
            value: ''
          }, {
            label: '结束时间',
            prop: 'endDate',
            placeholder: "请选择计划结束时间",
            itemType: 'date',
            value: ''
          }, {
            label: '收支类型',
            placeholder: "请选择",
            prop: 'payType',
            itemType: 'select',
            options: [
              {value: "1", label: "收入"},
              {value: "2", label: "支出"}
            ],
            value: ''
          }],
        },
        tableParams: {
          dataArray: [],
          showMultiSelection: false,
          columnArray: [
            {label: '日期时间', prop: 'date', sortable: false},
            {label: '费用类型', prop: 'costType', sortable: false},
            {label: '收支类型', prop: 'payType', sortable: false},
            {label: '金额', prop: 'money', sortable: false},
            {label: '责任人', prop: 'username', sortable: false},
            {label: '说明', prop: 'memo', sortable: false}
          ],
          rowHandle: {
            view: {
              show: false
            },
            update: {
              show: false
            }
          }
        },
        show: false,
        showTip: false,
        pageCount: 0,
        pageIndex: 1,
        pageSize: 10,
        modifyData: {},
        searchCondition: {},
      }
    },
    created() {
      this.init()
    },
    methods: {
      coverFormData(data) {
        this.searchCondition = data;
        this.pageIndex = 1;
        this.dailyList();
      },
      handleSearchTopBtn(methodName) {
        if (methodName === "refresh") {
          this.fresh();
        } else{
          this.createDaily();
        }
      },
      handleReset(formName) {
        this.$refs.form.resetForm(formName);
      },
      handleOperation(rowIndex, row, methodName) {
        this.id = row.id
        if (methodName === "update") {
          this.showTip = true
          this.modify()
        } else if (methodName === "delete") {
          this.deletedata()
        }
      },
      reset() {
        this.payType = '',
          this.startDate = '',
          this.endDate = ''
      },
      modify() {
        let parmas = {
          id: this.id
        }
        let success = data => {
          if (data.code === "OK") {
            this.modifyData = data.data
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpDisbursegetOne(parmas, success)
      },
      deletedata() {
        this.$confirm('是否删除该消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          //删除商品信息
          let parmas = {
            id: this.id
          }
          let success = data => {
            if (data.code === 'OK') {
              this.$message.success("删除成功")
              this.dailyList()
            } else {
              this.$message.success(data.msg)
            }
          }
          this.api.erpDisburseDelete(parmas, success)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      init() {
        this.dailyList()
      },

      fresh() {
        this.dailyList()
      },
      //日常收支list列表
      dailyList() {
        let param = this.searchCondition;
        if (!param.pageIndex || !param.pageSize) {
          param['pageIndex'] = this.pageIndex;
          param['pageSize'] = this.pageSize;
        }
        let success = data => {
          if (data.code === "OK") {
            this.tableParams.dataArray = data.data
            data.data.forEach(element => {
              element.payType = payTypeObject[element.payType];
              element.date = element.date.substr(0, 10);
            });
            this.pageCount = data.pageCount
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpDisburseList(param, success)
      },
      editData() {
        this.showTip = true
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.searchCondition['pageIndex'] = val;
        this.dailyList();
      },
      createDaily() {
        this.show = true
      },
      //关闭弹窗
      closeDialog() {
        this.show = false;
        this.showTip = false;
      },
    },
  }
</script>
<style lang="scss" scoped>
  .dailyExpensesContainer {
    .daily-con {
      height:140px;
      background: #fff;
      padding: 0 10px;
  }
    .DailyTable {
      width: 100%;
      background: #fff;
      margin-top:10px;
    }

  .el-pagination {
     padding: 10px 0;
     text-align: right;
   }


  }
</style>


